<template>
  <div>
    <ul>
      <li class="movie-list" v-for="item in jingdian" :key="item.id">
        <img :src="item.img" />
        <div class="movie-text">
          <h3>{{ item.nm }}</h3>
          <div>{{ item.enm }}</div>
          <div>{{ item.cat }}</div>
          <div>{{ item.pubDesc }}</div>
        </div>
        <div class="movie-number">
          <span class="movie-orange" v-if="item.sc > 0">
           <span class="movie-n">{{ item.sc }}</span>
            <span>分</span>
            </span>
          
          <span v-else>暂无评分</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "jingdian",
  data() {
    return {
      jingdian: [],
    };
  },
  mounted() {
    //使用axios 获取数据
    axios
      .get(
        "/ajax/moreClassicList?sortId=1&showType=3&limit=10&offset=20&optimus_uuid=87440CC055DD11ECA79C3D45F018B177FCBF3B7754AE433A87787DFD67337698&optimus_risk_level=71&optimus_code=10"
      )
      .then((res) => {
        this.jingdian = res.data.classicMovies.list;
      });
  },
};
</script>

<style scoped>
/* 经典电影样式 */
ul {
  padding-top: 20px;
}
.movie-list {
  margin: 0 0 20px 20px;
  height: 94px;
  display: flex;
}
.movie-list img {
  width: 66px;
  height: 94px;
}
.movie-list .movie-text {
  width: 220px;
  height: 94px;
  margin-left: 10px;
}
.movie-text  h3{
  font-size: 18px;
  color: #000;
  margin-bottom: 4px;
}
.movie-text div{
  margin-bottom: 4px;
}
.movie-number{
  color: #999999;
  font-size: 12px;
}
.movie-number .movie-orange .movie-n{
  color: rgb(250, 181, 19);
  font-size: 16px;
}
</style>
